<template>
  <div class="ktv-item">
    <router-link :to="{path: '/detail', query: {field: 'ktv', id: ktvInfo.id}}">
      <div class="img">
        <img class="ktv-img" :src="ktvInfo.img" :alt="ktvInfo.name">
      </div>
      <div class="info">
        <h1 class="title">{{ktvInfo.name}}</h1>
        <p class="stars">
          <star :star-info="{star:ktvInfo.star,score:ktvInfo.score}"></star>
        </p>
        <div class="other">
          <span class="item">
            ￥
            <span class="price">{{ktvInfo.default_price}}</span>
            元起
          </span>
          <span class="item">{{ktvInfo.city_name}}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
  import Star from 'components/ScrollWrapper/Sub/Star.vue';

  export default {
    name: 'KtvItem',
    props: {
      ktvInfo: Object
    },
    components: {
      Star
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .ktv-item {
    background-color: #FFFFFF;
    a {
      position: relative;
      @include flex-row;

      .img {
        width: 1.2rem;
        height: 1.2rem;
        padding: .1rem;
        box-sizing: border-box;

        .ktv-img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        overflow: hidden;
        padding: .1rem .1rem 0 1.2rem;
        box-sizing: border-box;

        .title {
          @include ellipsis;
          font-size: .16rem;
          line-height: .2rem;
        }

        .stars {
          line-height: .5rem;
        }

        .other {
          @include flex-row;
          justify-content: space-between;

          .item {
            font-size: .14rem;
          }

          .price {
            font-size: .2rem;
            color: $defaultGreen;
          }
        }
      }
    }
  }
</style>
